<!--  -->
<template>
  <div class="app">
    <top-tit :tit="'VIP会员'"></top-tit>

    <div class="user_info">
      <div class="container">
        <div class="head_icom">
          <img :src="userIcon" alt="" />
        </div>
        <div class="vip_info">
          <p>您的年度会员 <span v-text="vipInfo.expired_at"></span> 到期</p>
          <p>购买后将会有效期顺延</p>
        </div>
      </div>
    </div>

    <div class="vip_type">
      <div class="container">
        <div
          class="item"
          v-for="item in vipList"
          :key="item.id"
          :class="{ 'active': tabIndex == item.id }"
          @click="changeTabIndex(item.id)"
        >
          <div class="item_box">
            <span class="type" v-text="item.name"></span>
            <div class="charge">
              <span class="icon">￥</span>
              <span class="num" v-text="item.charge"></span>
            </div>
            <p>所有视频免费看</p>
          </div>
        </div>
      </div>
    </div>

    <div class="btn_buy" @click="vipBuy">购买会员</div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import topTit from "@/components/topTit";
import { Toast } from "vant";
import router from '@/router';
export default {
  name: "vip",
  //import引入的组件需要注入到对象中才能使用
  components: {
    topTit,
  },
  data() {
    //这里存放数据
    return {
      token: localStorage.getItem("h5-token"),
      userInfo: "",
      vipInfo: "",
      userIcon: "",
      tabIndex: 0,
      vipList: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeTabIndex(num) {
      this.tabIndex = num;
    },
    vipBuy(){
        if(this.tabIndex == 0){
            Toast('请选择会员类型');
            return
        }
        this.$router.push({
            path:'/order',
            query:{
                good_id:this.vipList[this.tabIndex-1].id,
                good_name:this.vipList[this.tabIndex-1].name,
                good_charge:this.vipList[this.tabIndex-1].charge,
            }
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // console.log("bip");
    if (this.token) {
      await this.$axios.get("http://1.14.239.98/api/v2/member/roles").then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.userInfo = res.data;
          //   console.log(this.userInfo);
          this.vipInfo = this.userInfo.data[0];
          //   console.log(this.vipInfo);
          // console.log('vip',this.vipList);w
          this.userIcon = this.vipInfo.user.avatar;
        }
        // console.log(this.phone);
      });

      await this.$axios.get("http://1.14.239.98/api/v2/roles").then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.vipList = res.data;
        }
        // console.log(this.phone);
      });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.app {
  background-color: #f6f6f6;
  height: 100%;
}
div.user_info {
  width: 100%;
  background-color: white;
  margin: 0.3rem 0;
  div.container {
    width: 6.9rem;
    height: 1.76rem;
    display: flex;
    align-items: center;
    div.head_icom {
      img {
        width: 0.96rem;
        height: 0.96rem;
      }
    }

    div.vip_info {
      margin-left: 15px;
      p {
        text-align: start;
        font-size: 0.26rem;
        color: #333;
        span {
        }
      }
    }
  }
}

div.vip_type {
  width: 100%;
  div.container {
    width: 6.9rem;
    // height: 127px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    // justify-items: start;
    div.item {
      margin: 0.05rem;
      width: 3.35rem;
      height: 2.54rem;
      padding: 0.3rem;
      background-color: white;
      border-radius: 8px;
      box-sizing: border-box;
      div.item_box {
        width: 100%;
        height: 100%;
        text-align: start;

        span.type {
          display: block;
          font-size: 0.28rem;
          font-weight: 600;
          color: #e1a500;
          line-height: 0.28rem;
          margin-bottom: 0.4rem;
        }

        div.charge {
          margin-bottom: 15px;
          span.icon {
            font-size: 0.36rem;
            font-weight: 600;
            color: #333;
            line-height: 0.36rem;
          }

          span.num {
            font-size: 0.56rem;
            font-weight: 600;
            color: #333;
            line-height: 0.56rem;
          }
        }

        p {
        }
      }
    }
    div.item.active {
      border: 1px solid #e1a500;
      background: #ffeded;
    }
  }
}

.btn_buy {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0.98rem;
  background-color: #cea200;
  line-height: 0.98rem;
  text-align: center;
  color: #fff;
  font-size: 0.32rem;
}
</style>
